<template>
	<view class="box">
		<view class="wrap" @tap="downLoadFile">
			<view class="content">
				<view class="title">{{title}}</view>
				<view class="detail">{{size}} {{unit}}</view>
			</view>
			<view class="extension">{{extension}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			extension: {
				type: String,
				default: ''
			},
			size: {
				type: [String, Number],
				default: ''
			},
			unit: {
				type: String,
				default: ''
			},
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		width: calc(100vw - 240rpx);
		min-height: 72px;
		background-color: #ffffff;
		border-radius: 4px;
		box-shadow: 1px 1px 1px 1px #f5f5f5;
		box-sizing: border-box;

		&::after {
			content: "";
			position: absolute;
			top: 14px;
			width: 10px;
			height: 10px;
			transform: rotate(45deg);
			left: -6px;
			background-color: inherit;
		}
	}

	.wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.content {
			margin: 10px 0 10px 10px;

			.title {}

			.detail {
				font-size: 13px;
				color: #8d8d8d;
			}
		}

		.extension {
			position: relative;
			width: 72rpx;
			height: 52px;
			margin: 10px 10px 10px 0;
			line-height: 52px;
			background-color: #f4f4f4;
			border-radius: 4px;
			text-align: center;
			flex: 0 0 auto;

			&:before {
				content: "";
				width: 24rpx;
				height: 12px;
				background: rgba($color: #000000, $alpha: 0) linear-gradient(225deg, #ffffff 45%, #dcdcdc 45%, );
				position: absolute;
				top: 0;
				right: 0;
				transition: all 0.3s ease 0s;
			}
		}
	}
</style>
